<template>
  <div class="nav_div">
    <el-card class="nav_el-card">
      <div class="nav_func-show">{{$store.state.nav.title}}</div> 
        <el-menu :default-active="$store.state.nav.menuActive" @select="handleSelect" router>
          <el-menu-item v-for="item in $store.state.nav.menuContents" :key="item.index" :index="item.index">
            <i :class="item.icon"></i>
            <span slot="title">{{item.title}}</span>
          </el-menu-item>
        </el-menu>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "AppNav",
  data() {
    return {
      // key: ''
    }
  },
  mounted() {
    //默认路由配置 项目后期需要打开
    //this.$router.push(`/office/${this.$store.state.nav.menuActive}`)

    //保存key防止刷新数据丢失
    // let temp = {
    //   'personal': '个人中心',
    //   'ehr': 'EHR',
    //   'meeting': '会议功能',
    //   'approval': '审批管理',
    //   'apply': '业务申请',
    //   'chat': '聊天沟通',
    //   'communicate': '资讯交流',
    //   'video': '视频会议',
    //   'cloudDisk': '公共云盘',
    //   'amuse': '娱乐活动',
    // }
    // for(let key in temp) {
    //   if(temp[key] === this.$store.state.nav.title){
    //     localStorage.setItem('key', key)
    //   }
    // }
  },
  methods: {
    handleSelect(key) {
      let navInfo = JSON.parse(localStorage.getItem('navInfo') ?? "{}")
      navInfo.menuActive = key
      localStorage.setItem('navInfo',JSON.stringify(navInfo))
      // console.log(this.$store.state.nav.menuActive)
      // this.key = key 
      this.$store.commit('nav/setMenuActive', key)
      // console.log(`/office/${key}`)
      this.$router.push(`/office/${key}`)
    }
  }
}
</script>

<style scoped>
.nav_div {
  width: 20%;
  min-height: 500px;
}
  .nav_el-card{
    width: 100%;
    min-height: 500px;
  }
  .nav_func-show {
    font-weight: bold;
    font-size: 18px;
    text-align: center;
  }
.el-menu {
  border-right:0!important;
}
</style>